<template>
  <div class="shjz-warp">
    <a-row :gutter="[16,16]">
      <a-col :span="6" v-for="item in shjzData">
        <a-card hoverable @click="openDetails(item)">
          <template #cover>
            <img alt="example" :src="`http://localhost:9763${item.image}`" style="width: 100%; height: 160px"/>
          </template>
          <a-card-meta :title="item.title">
            <template #description>
              <p class="text-overflow-1">{{ item.subtitle }}</p>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>

</template>


<script setup>
import {ref, onMounted} from "vue";
import router from "@/router";
import axios from "axios";

// 查询社会捐赠数据
const shjzData = ref([
  {
    title: '慈善募捐丨困境家庭救援计划',
    subtitle: '为困境家庭送去一份关怀与温暖',
    mainImage: 'https://zgshfp.oos-hq-bj.ctyunapi.cn/zhongchou/photo/2022/11/15/1668502373188.png',
    content: ``
  },
  {
    title: '慈善募捐丨血癌家庭救助计划',
    subtitle: '预计救助不少于20位困难大病家庭，对每个家庭给予生活补助和患者康复治疗费用补贴。',
    mainImage: 'https://zgshfp.oos-hq-bj.ctyunapi.cn/zhongchou/photo/2022/7/20/1658308163925.jpg',
    content: ``
  },
  {
    title: '慈善募捐丨重疾之家医疗救助',
    subtitle: '预计救助不少于10位重疾家庭，对每个家庭给予生活补助和康复治疗费用补贴。',
    mainImage: 'https://zgshfp.oos-hq-bj.ctyunapi.cn/zhongchou/photo/2022/7/28/1659008322855.jpg',
    content: ``
  },
  {
    title: '慈善募捐丨爱心关怀大病群体',
    subtitle: '为白血病儿童筹措治病资金',
    mainImage: 'https://zgshfp.oos-hq-bj.ctyunapi.cn/zhongchou/photo/2024/2/2/1706838010426.png',
    content: ``
  },
])
const queryShjzData = async () => {
  const {data} = await axios.get('http://localhost:9763/system/project/list')
  console.log(data.rows)
  shjzData.value = data.rows
}

const openDetails = (item) => {
  router.push({name: 'ShjzDetails', query: {id: item.id}})
}

onMounted(() => {
  queryShjzData()
})

</script>


<style scoped>
.shjz-warp {
  padding: 20px 0;
}

.text-overflow-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
